<template>
  <div class="filter-bar">
    <div v-for="group in groups" :key="'group_' + group.key" class="filter-group">
      <a-space :size="[0, 10]" wrap class="filter-tag">
        <a-checkable-tag v-for="tag in group.items" :key="'tag_'+group.key+'_'+tag.key" :checked="checkTag(tag, group)" @change="checked => handleChange(tag, group, checked)">
          {{ tag.tag }}
        </a-checkable-tag>
      </a-space>
    </div>
  </div>
</template>
<script>
import { listFilters } from '@/static/config.js'
export default {
  computed: {
    groups() {
      return listFilters
    }
  },
  methods: {
    checkTag(tag, group) { 
      return group.selected === tag.key
    },
    handleChange(tag, group, checked) {
      if (checked) {
        group.selected = tag.key
      }
    }
  }
}
</script>
<style lang="less" scoped>
.filter-bar {
  margin: 10px;
  border-bottom: solid 1px #e2e2e2;
  padding-bottom: 10px;
  .filter-group {
    margin-bottom: 5px;
    text-align: left;
  }
}
</style>